<template>
	<view class="page">
		<view>






			<view class="u-padding-20 u-font-weight">基本资料</view>

			<view>
				<view style="background: #fff;padding:0 20rpx ;">
					<u-form :model="form" ref="uForm" label-width="150">
						<u-form-item label="昵称" prop="nickname">
							<u-input v-model="form.nickname" />
						</u-form-item>
						<u-form-item label="性别" prop="intro">
							<u-radio-group v-model="form.gender" @change="radioGroupChange">
								<u-radio active-color="#00C08D" v-for="(item, index) in sex" :key="index"
									:name="item.value" :disabled="item.disabled">
									{{item.name}}
								</u-radio>
							</u-radio-group>
						</u-form-item>

						<u-form-item label="年龄" prop="age">
							<u-input v-model="form.age" type="Number" />
						</u-form-item>

						<u-form-item label="手机号" prop="mobile">
							<u-input v-model="form.mobile" type="Number" />
						</u-form-item>

						<u-form-item label="地址" prop="address" @click="openMap">
							<u-input placeholder="请选择地址" v-model="form.address" disabled type="select"
								@click="openMap" />
						</u-form-item>


					</u-form>
				</view>



				<view>
					<view class="u-margin-top-20 u-flex u-row-between u-padding-20 " style="background: #fff;">
						<view>技师头像</view>
						<wr-upload_img ref="avatar" type="image" :afterLoadUrl="form.avatar" defaultLength="1"
							width="80" height="80" iconsize="30" cutType="imageUrl" borderRadius="200" icon="photo">
						</wr-upload_img>
					</view>
				</view>

				<view class="u-padding-20 u-font-weight">认证信息</view>


				<view style="background: #fff;margin-top: 20rpx;">
					<u-cell-item title="认证信息" @click="godetailInfo" :value="detailInfo?'完成认证':''"></u-cell-item>
				</view>

				<view class="u-padding-20 u-font-weight">选择标签</view>

				<view class="u-flex u-padding-20 u-flex-wrap ">
					<view class="u-margin-right-20 u-margin-bottom-20" v-for="(item,index) in tags" :key="index">
						<u-tag @click="Ctag" :index="index" :text="item.name" :type="item.select? 'success':'info' ">
						</u-tag>
					</view>
				</view>
				
				
			



				<view class="bottomFix">
					<u-button @click="submit" type="success" :custom-style="{background:'#00C08D'}">提交</u-button>
				</view>



			</view>
			<u-toast ref="uToast" />
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				detailInfo: '',
				sex: [{
						name: '女',
						value: 0

					},
					{
						name: '男',
						value: 1
					},

				],
				// u-radio-group的v-model绑定的值如果设置为某个radio的name，就会被默认选中
				form: {
					nickname: '',
					gender: 0,
					mobile: "",
					age: "",
					lat: "",
					lng: "",
				},
				rules: {
					nickname: [{
						required: true,
						message: '请输入姓名',
						// 可以单个或者同时写两个触发验证方式 
						trigger: ['change', 'blur'],
					}],

					age: [{
						required: true,
						message: '请输入年龄',
						// 可以单个或者同时写两个触发验证方式 
						trigger: ['change', 'blur'],
					}],

					mobile: [{
							required: true,
							message: '请输入手机号',
							trigger: ['change', 'blur'],
						},
						{
							// 自定义验证函数，见上说明
							validator: (rule, value, callback) => {
								// 上面有说，返回true表示校验通过，返回false表示不通过
								// this.$u.test.mobile()就是返回true或者false的
								return this.$u.test.mobile(value);
							},
							message: '手机号码不正确',
							// 触发器可以同时用blur和change
							trigger: ['change', 'blur'],
						}
					],
					address: [{
						required: true,
						message: '请输入地址',
						// 可以单个或者同时写两个触发验证方式 
						trigger: ['change', 'blur'],
					}],

				},
				tags: []
			};
		},
		methods: {
			jiazai() {
				this.$u.post('/user/index', {}).then(res => {
					if (res.is_auth) {
						this.form = res;
						let technician_tag_ids = res.technician_tag_ids.split(",");
						let tags = this.tags;
						technician_tag_ids.forEach(item => {
							tags.forEach(item1 => {
								if (item == item1.id) {
									item1.select = 1;
								}
							})
						})
						this.form.age = JSON.stringify(res.age);
					}


				}).catch(err => {})
			},



			openMap(e) {
				uni.chooseLocation({
					success: (res => {
						this.form.address = res.name + res.address;;
						this.form.lat = res.latitude
						this.form.lng = res.longitude;

					})
				});

			},

			godetailInfo() {
				uni.navigateTo({
					url: '/pages/apply/detail'
				})
			},
			Ctag(e) {
				this.$nextTick(() => {
					this.$set(this.tags[e], "select", !this.tags[e].select);
				})

			},
			radioGroupChange(e) {
				this.form.gender = e;
			},
			submit() {




				this.$refs.uForm.validate(valid => {
					if (valid) {
						let detailInfo = this.detailInfo;
						let avatar = this.$refs.avatar.afterUploadImgList;
						let arr = [];
						this.tags.filter(item => item.select == 1).forEach(item => {
							arr.push(item.id)
						});
						if (!avatar.length) {
							this.$u.toast("请上传头像")
							return
						}
						if (!detailInfo) {
							this.$u.toast("请上传认证信息")
							return
						}

						if (!arr.length) {
							this.$u.toast("请选择标签")
							return
						}

						this.$u.post('/user/addAuth', {
							nickname: this.form.nickname,
							avatar: avatar[0],
							gender: this.form.gender,
							age: this.form.age,
							mobile: this.form.mobile,
							address: this.form.address,
							auth_images: this.detailInfo.auth_images,
							technician_tag_ids: arr.join(","),
							username: this.detailInfo.username,
							id_number: this.detailInfo.id_number,
							lng: this.form.lng,
							is_edit: this.form.is_auth ? '1' : '0',
							lat: this.form.lat,
						}).then(res => {
							this.$refs.uToast.show({
								title: this.form.is_auth ? '修改成功' : '提交成功，请耐心等待后台审核',
								type: 'success',
								back: true
							})
						}).catch(err => {})

					} else {
						console.log('验证失败');
					}
				});
			},


			tag() {
				return new Promise((resolve, reject) => {
					this.$u.post('/technician/tag', {}).then(res => {
						res.forEach(item => {
							item.select = 0;
						})
						this.tags = res;
						resolve(res)
					}).catch(err => {})
				})


			}

		},
		// 必须要在onReady生命周期，因为onLoad生命周期组件可能尚未创建完毕
		onReady() {
			this.$refs.uForm.setRules(this.rules);
		},
		async onLoad() {
			await this.tag()
			this.jiazai()

		},
		onShow() {
			if (!this.detailInfo) return


			console.log(this.detailInfo)
		}
	};
</script>

<style>
	.page {
		background: #F1F1F1;
		min-height: 100vh;
		padding-bottom: 100rpx;
	}

	.video_upload {
		margin: 0 !important;
	}
</style>
